<template>
  <div class="search-phones">
    <!-- 查询条件 -->
    <div class="set-parameters">
      <el-input
        v-model.trim="phonenumber"
        style="width: 300px; margin-right: 10px"
        placeholder="请输入手机号/微信号"
        size="small"
        clearable
        maxlength="20"
        show-word-limit
      ></el-input>
      <!-- <template slot="prepend">手机号码</template> -->
      <el-date-picker
        v-model="timeRange"
        size="small"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button
        size="small"
        style="margin-left: 10px; background-color: #ff9f00; color: #ffffff; border: solid #ff9f00 1px"
        plain
        @click="queryPhonesList"
      >
        开始搜索
      </el-button>
    </div>
    <!-- 号码列表 -->
    <el-table :data="phonesList" stripe border>
      <!-- <el-table-column label="id" prop="id" width="100px"></el-table-column> -->
      <el-table-column label="微信号" prop="wechatid" width="170px"></el-table-column>
      <el-table-column label="微信昵称" width="170px">
        <template slot-scope="scope">
          <span v-text="wechatsNameMap[scope.row.wechatid] || scope.row.wechatid"></span>
        </template>
      </el-table-column>
      <el-table-column label="号码" prop="phonenumber"></el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span v-text="$options.filters.timeFilter(scope.row.createTime)"></span>
        </template>
      </el-table-column>
      <el-table-column label="是否执行">
        <template slot-scope="scope">
          <span v-text="scope.row.state === 0 ? '已执行' : '未执行'"></span>
        </template>
      </el-table-column>
      <el-table-column label="任务结果" prop="task_result"></el-table-column>
      <!-- <el-table-column label="号码是否有效">
        <template slot-scope="scope">
          <span v-if="scope.row.task_result === 0" style="color: #67c23a">有效</span>
          <span v-else-if="scope.row.task_result === 1" style="color: #f56c6c">无效</span>
          <span v-else style="color: #909399">未知</span>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 数据统计 -->
    <div class="data-count">
      <span>总的号码数：{{ totalSize }}</span>
      <span>添加失败的号码数：{{ addFailSize }}</span>
      <span>没有用户号码数：{{ notUseSize }}</span>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="margin: 0 auto"
      :current-page="currentPage"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPhoneNumberList } from '@/api/httpApi'

export default {
  name: 'ToolsSearchPhones',
  data() {
    return {
      addFailSize: 0, // 添加失败的号码数
      phonesList: [], // 查询结果
      notUseSize: 0, // 没有用户号码数
      totalSize: 0, // 总的号码数
      currentPage: 1, // 当前页
      pageSize: 20, // 每页几个数据
      phonenumber: '', // 手机号
      timeRange: '' // 时间段
    }
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'tools/currentWeChatId', // 当前页的微信id
      wechatsNameMap: 'conversation/wechatsNameMap' // 微信id-微信信息对照表
    })
  },
  created() {
    // 页面加载前 先查询下数据
    this.queryPhonesList()
  },
  methods: {
    // 查询号码
    queryPhonesList() {
      if (this.currentWeChatId) {
        const begin_time = this.timeRange && this.timeRange[0] ? this.transformTime(this.timeRange[0]) : ''
        const end_time = this.timeRange && this.timeRange[1] ? this.transformTime(this.timeRange[1]) : ''
        getPhoneNumberList(
          this.currentWeChatId,
          this.phonenumber,
          begin_time,
          end_time,
          this.currentPage,
          this.pageSize
        )
          .then((res) => {
            if (res.code === 0) {
              this.addFailSize = res.data && res.data.addFailSize ? res.data.addFailSize : 0
              this.phonesList = res.data && res.data.list ? res.data.list : []
              this.notUseSize = res.data && res.data.notUseSize ? res.data.notUseSize : 0
              this.totalSize = res.data && res.data.totalSize ? res.data.totalSize : 0
            } else {
              this.$message({
                type: 'error',
                message: '查询失败！',
                duration: 1000
              })
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      } else {
        this.addFailSize = 0
        this.phonesList = []
        this.notUseSize = 0
        this.totalSize = 0
      }
    },
    // 修改pageSize
    handleSizeChange(val) {
      this.size = val
      this.queryPhonesList()
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryPhonesList()
    },
    // 时间戳转换成 2020-09-21 16:44
    transformTime(times) {
      const date = new Date(times)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // let s = date.getSeconds()
      const time = Y + M + D + h + m
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.search-phones {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow: hidden;

  .set-parameters {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .data-count {
    padding: 10px 0;
    span {
      margin-right: 10px;
    }
  }
}
</style>
